<template>
  <div class="layout-wrapper" :class="{debug}">
    <LeftPanel></LeftPanel>
    <div class="layout-painter">
       <SmoothDndContainer class="block-group" 
          orientation="vertical"
          tag="div"  group-name="blocks" 
          @drop="(payload)=>{
            console.log('payload',payload);
            const newBlock=applyDrag(blocks,payload);
            useEditor.updateBlocks(newBlock);
            }"  
          >
        <!-- <SmoothDndDraggable v-for="block in blocks" :key="block">
          <div class="block-item">{{block}}</div>
        </SmoothDndDraggable> -->
        <!-- <SmoothDndDraggable>
          <TextBlock></TextBlock>
        </SmoothDndDraggable>
        <SmoothDndDraggable>
          <ImageBlock></ImageBlock>
        </SmoothDndDraggable>
        <SmoothDndDraggable>
          <ChartBlock></ChartBlock>
        </SmoothDndDraggable> -->
        <SmoothDndDraggable 
        :class="{'block-wrapper':true,debug:activeBlockId===block.id||useDebug.debug}"
        v-for="block in blocks" 
        :key="block.id"
        :data-block-type="block.type"
        :data-block-id="block.id"
        @click="useEditor.selectBlock(block)"
        >
          <BlockRenderer :block="block"></BlockRenderer>
        </SmoothDndDraggable>
      </SmoothDndContainer>
    </div>
    <div>
      <RightPanel></RightPanel>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { storeToRefs } from 'pinia';
import type {DropResult} from 'smooth-dnd';

import BlockRenderer from '@/blocks/BlockRenderer.vue';
// import ChartBlock from '@/blocks/internal/ChartBlock.vue';
// import ImageBlock from '@/blocks/internal/ImageBlock.vue';
// import TextBlock from '@/blocks/internal/TextBlock.vue';
import LeftPanel from '@/components/LeftPanel.vue'
import RightPanel from '@/components/RightPanel/RightPanel.vue';
import { SmoothDndContainer } from '@/components/SmoothDnd/SmoothDndContainer';
import { SmoothDndDraggable } from '@/components/SmoothDnd/SmoothDndDraggable';
import {useDebugStore} from '@/stores/debug';
import {useEditorStore} from '@/stores/editor';
import {arrMove} from '@/utils/array';
const useDebug=useDebugStore()
const useEditor=useEditorStore()

const {debug}=storeToRefs(useDebug)
const {blocks,activeBlockId}=storeToRefs(useEditor)

const applyDrag=<T extends any[]>(arr:T,dragResult:DropResult)=>{
  const result=[...arr];

  const {removedIndex, addedIndex, payload}=dragResult;
  console.log("removedIndex, addedIndex, payload",removedIndex, addedIndex, payload)
  if(addedIndex===null) return result;

  // 从左侧栏的添加到布局中
  if(addedIndex!==null&&removedIndex===null){
    result.splice(addedIndex,0,payload)
  }
  // 布局内部的移动
  if(removedIndex!==null&&addedIndex!==removedIndex){
    return arrMove(result,removedIndex,addedIndex);
  }

  return result;
}


</script>

<style scoped>
.layout-wrapper{
  height: 100%;
  display: flex;
  flex-direction: row;;
}
/* .debug{
  border: 2px dashed #afafaf;
} */
.layout-painter{
  width: 100%;
  /* height: 100px; */
  overflow-y: auto;
  background-color: #f5f5f5;
  margin:20px;
}
.block-wrapper{
  border-radius: 4px;
  border: 2px dashed transparent;
  margin: 20px 0;
  padding: 20px;
}
.block-wrapper.debug{
  border-color: #00a4ff;
}
</style>
